<template>
  <div>姓名：{{ userInfo.name }} 年龄：{{ userInfo.age }}</div>
  <div>性别：{{ getSexByRecord(userInfo.sex) }}</div>
  <div>性别：{{ getSexByMap(userInfo.sex) }}</div>
  <div>token：{{ token }}</div>
  <div>getter值：{{ cName }}</div>
  <el-button @click="handleUserInfo">userInfo</el-button>
  <el-button @click="handleAge">age</el-button>
  <el-button @click="handleToken">token</el-button>
  <el-button @click="handleSex">sex</el-button>
  <el-button @click="jump2page('/404')">404</el-button>
</template>

<script setup lang="ts">
import { getSexByRecord, getSexByMap } from '@/utils/filters';
import { ElMessage } from 'element-plus';
/**
 * store
 */
import { storeToRefs } from 'pinia';
import { useDemoStore } from '@/store/modules/demo';
const demoStore = useDemoStore();
const { userInfo, token, cName } = storeToRefs(demoStore);
const { updateUserInfo, updateAge, updateSex, updateToken } = demoStore;
const handleUserInfo = () => {
  updateUserInfo({
    name: 'zhangsan',
    age: 19,
    sex: 'male',
  });
};
const handleAge = () => {
  updateAge(userInfo.value.age + 1);
};
const handleSex = () => {
  const sex = userInfo.value.sex === 'male' ? 'female' : 'male';
  updateSex(sex);
};
const handleToken = () => {
  updateToken('23234');
};

import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const { handleLogin } = userStore;
handleLogin({
  username: 'admin',
  password: '123456',
})
  .then(() => {})
  .catch((err) => {
    ElMessage.error(err);
  });
/**
 * router
 */
import { useRouter } from 'vue-router';
const router = useRouter();
const jump2page = (path: string) => {
  router.push(path);
};
</script>
